<template>
  <div>
    <el-form ref="refFormLogin" :model="FormLoginVO" :rules="FormLoginVO_Rules" auto-complete="on" label-position="left" hide-required-asterisk>
      <div class="center_box">
        <div>
          <div>
            <img :src="logoSrc" alt="" style="height:130px;">
          </div>
          <div class="title gl_my_10">跆拳道大满贯数字化管理平台</div>
        </div>
      </div>
      <el-form-item prop="userNameOrEmailAddress">
        <el-input v-model.trim="FormLoginVO.userNameOrEmailAddress" :placeholder="$t('login.username')" name="userNameOrEmailAddress" type="text" tabindex="1" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input ref="password" v-model.trim="FormLoginVO.password" style="width:100%" :placeholder="$t('login.password')" name="password" type="password" show-password tabindex="2" @keyup.enter.native="$emit(clickLogin)" />
      </el-form-item>
      <slot name="EXTENDFORM" />
    </el-form>
    <slot name="FORMLOGIN" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { FormLoginVO_Rules } from '@/lib/validate/login/index.js';
import { FormLoginVO } from '@/lib/form/login';

export default {
  name: 'MobileFormLogin',
  data() {
    return {
      FormLoginVO_Rules: new FormLoginVO_Rules(),
      FormLoginVO: new FormLoginVO(),
      logoSrc: require('@/assets/images/logo/logo_word.png')
    };
  },
  computed: {
    ...mapState({
      markTelephone: state => state.app.markTelephone
    })
  },
  created() {
    this.FormLoginVO.userNameOrEmailAddress = this.markTelephone;
  },
  methods: {
    ...mapActions({ setMarkTelephone: 'app/setMarkTelephone' }),
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
    routerRedirect() {
      this.setMarkTelephone(this.FormLoginVO.userNameOrEmailAddress);
      this.$router.push({
        name: 'register',
        query: {
          ReturnUrl: this.$route.query['ReturnUrl']
        },
        params: this.$route.params
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.center_box {
  font-size: 12px;
  color:#606266;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 50px;
}
</style>
